<template>
  <div :class="leftNav ? 'w-[15%]' : 'w-[3%]'" class="bg-white/80 backdrop-blur-sm shadow-lg border-r border-gray-200/50 transition-all duration-300">
    <div v-if="leftNav" class="p-6">
      <div class="flex items-center justify-between mb-6">
        <h3 class="text-xl font-bold text-gray-900">学习领域</h3>
      </div>
      
      <div class="space-y-3">
        <div v-for="domain in domains" :key="domain.id" :class="[
          'group p-4 rounded-xl cursor-pointer transition-all duration-300 border-2',
          selectedDomain === domain.id
            ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white border-indigo-500 shadow-lg transform scale-105'
            : 'bg-white/60 hover:bg-white/80 border-gray-200 hover:border-indigo-300 hover:shadow-md'
        ]" @click="handleDomainSelect(domain.id)">
          <div class="flex items-center justify-between">
            <div class="font-semibold text-lg">{{ domain.name }}</div>
            <div :class="[
              'px-3 py-1 rounded-full text-xs font-medium transition-colors duration-200',
              selectedDomain === domain.id
                ? 'bg-white/20 text-white'
                : 'bg-indigo-100 text-indigo-600 group-hover:bg-indigo-200'
            ]">
              {{ domain.count }} 题
            </div>
          </div>
          <div v-if="selectedDomain === domain.id" class="mt-2 text-sm opacity-90">
            点击查看题目列表
          </div>
        </div>
      </div>
    </div>
    
    <div v-else class="flex flex-col items-center p-4 h-full justify-center">
      <div class="space-y-4">
        <div v-for="domain in domains" :key="domain.id" :class="[
          'w-12 h-12 rounded-xl cursor-pointer transition-all duration-300 flex items-center justify-center border-2',
          selectedDomain === domain.id
            ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white border-indigo-500'
            : 'bg-white/60 border-gray-200 hover:border-indigo-300 hover:bg-white/80'
        ]" @click="handleDomainSelect(domain.id)">
          <span class="font-bold text-sm">{{ domain.name.charAt(0) }}</span>
        </div>
      </div>
      
      <button class="mt-6 p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200" @click="handleToggleNav">
        <svg class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Domain {
  id: string
  name: string
  count: number
}

interface Props {
  domains: Domain[]
  selectedDomain: string
  leftNav: boolean
}

interface Emits {
  (e: 'update:selectedDomain', value: string): void
  (e: 'update:leftNav', value: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const handleDomainSelect = (domainId: string) => {
  emit('update:selectedDomain', domainId)
}

const handleToggleNav = () => {
  emit('update:leftNav', true)
}
</script>